---
title: Migration depuis SvelteKit
description: Conseils pour migrer un projet SvelteKit existant vers Astro
sidebar:
  label: SvelteKit
type: migration
stub: true
framework: SvelteKit
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import { CardGrid, LinkCard } from '@astrojs/starlight/components';

[SvelteKit](https://kit.svelte.dev) est un framework pour la création d'applications web à partir de Svelte.

## Principales similitudes entre SvelteKit et Astro

SvelteKit et Astro partagent certaines similitudes qui vous aideront à migrer votre projet :

- SvelteKit et Astro sont tous deux des générateurs de sites statiques JavaScript modernes et des frameworks de rendu côté serveur.

- SvelteKit et Astro utilisent tous deux un dossier [`src/` pour les fichiers de votre projet](/fr/basics/project-structure/#src) et un [dossier spécial pour le routage basé sur les fichiers](/fr/basics/astro-pages/). La création et la gestion des pages de votre site devraient vous être familières.

- Astro possède [une intégration officielle pour l'utilisation des composants Svelte](/fr/guides/integrations-guide/svelte/) et prend en charge [l'installation des paquets NPM](/fr/guides/imports/#paquets-npm), dont plusieurs pour Svelte. Vous serez en mesure d'écrire des composants d'interface utilisateur Svelte, et pourrez peut-être conserver tout ou partie de vos composants et dépendances existants.

- Astro et SvelteKit vous permettent tous deux d'utiliser un [CMS headless, des APIs ou des fichiers Markdown pour les données](/fr/guides/data-fetching/). Vous pouvez continuer à utiliser votre système préféré de création de contenu et conserver votre contenu existant.

## Principales différences entre SvelteKit et Astro

Lorsque vous recréez votre site SvelteKit avec Astro, vous remarquerez quelques différences importantes :

- Les sites Astro sont des applications multi-pages, alors que SvelteKit utilise par défaut des SPA (applications mono-page) avec un rendu côté serveur, mais peut également créer des MPA, des SPA traditionnelles, ou vous pouvez mélanger ces techniques au sein d'une application.

- [Composants](/fr/basics/astro-components/) : SvelteKit utilise [Svelte](https://svelte.dev). Les pages Astro sont construites en utilisant les [composants `.astro`](/fr/basics/astro-components/), mais peuvent aussi prendre en charge [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS](/fr/guides/framework-components/) et la création de modèles HTML bruts.

- [Axé sur le contenu](/fr/concepts/why-astro/#axé-sur-le-contenu) : Astro a été conçu pour mettre en valeur votre contenu et vous permettre d'opter pour l'interactivité uniquement en cas de besoin. Une application SvelteKit existante peut être conçue pour une forte interactivité côté client. Astro a des capacités intégrées pour travailler avec votre contenu, comme la génération de pages, mais peut nécessiter des techniques Astro avancées pour inclure des éléments qui sont plus difficiles à reproduire en utilisant les composants `.astro`, comme les tableaux de bord.

- [Prêt pour du Markdown](/fr/guides/markdown-content/) : Astro intègre la prise en charge de Markdown, et inclut une [propriété `layout` spéciale de frontmatter YAML](/fr/basics/layouts/#mises-en-page-markdown) utilisée par fichier pour la création de modèles de pages. Si vous convertissez un blog SvelteKit basé sur Markdown, vous n'aurez pas à installer une intégration Markdown séparée et vous n'aurez pas à définir une mise en page via un fichier de configuration. Vous pouvez utiliser vos fichiers Markdown existants, mais vous devrez peut-être les réorganiser, car le routage basé sur les fichiers d'Astro ne nécessite pas de dossier pour chaque page.


## Passer de SvelteKit à Astro

Pour convertir un blog SvelteKit en Astro, commencez par notre modèle de démarrage de thème de blog, ou explorez d'autres thèmes de blog communautaires dans notre [vitrine de thèmes](https://astro.build/themes/).

Vous pouvez passer un argument `--template` à la commande `create astro` pour démarrer un nouveau projet Astro avec l'un de nos modèles de départ officiels. Vous pouvez aussi [démarrer un nouveau projet à partir de n'importe quel dépôt Astro existant sur GitHub](/fr/install-and-setup/#utiliser-un-thème-ou-un-modèle-de-démarrage).

  <PackageManagerTabs>
    <Fragment slot="npm">
    ```shell
    npm create astro@latest -- --template blog
    ```
    </Fragment>
    <Fragment slot="pnpm">
    ```shell
    pnpm create astro@latest --template blog
    ```
    </Fragment>
    <Fragment slot="yarn">
    ```shell
    yarn create astro --template blog
    ```
    </Fragment>
  </PackageManagerTabs>

Apportez vos fichiers Markdown existants (ou MDX, avec notre intégration optionnelle) comme contenu pour [créer des pages Markdown ou MDX](/fr/guides/markdown-content/).

Bien que les composants de routage et de mise en page basés sur les fichiers soient similaires dans Astro, vous souhaiterez peut-être en savoir plus sur [la structure de projet d'Astro](/fr/basics/project-structure/) pour savoir où les fichiers doivent être placés.

Pour convertir d'autres types de sites, tels qu'un portfolio ou un site de documentation, consultez les modèles de démarrage officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne IDX, StackBlitz, CodeSandbox et Gitpod.

## Ressources communautaires

<CardGrid>

  <LinkCard title="Réécriture de mon blog de SvelteKit vers Astro (Anglais)" href="https://kharann.com/blog/rewriting-my-blog/"/>

</CardGrid>

:::note[Vous avez une ressource à partager ?]
Si vous avez trouvé (ou créé !) une vidéo ou un article de blog utile sur la conversion d'un site SvelteKit en site Astro, [ajoutez-le à cette liste](https://github.com/withastro/docs/edit/main/src/content/docs/en/guides/migrate-to-astro/from-sveltekit.mdx) !
:::
